<template>
  <div style="padding: 36px">
    <el-row :gutter="32">
      <el-col :span="16">
        <el-card>
          <div style="border-bottom: 1px solid #ededed; display: flex; align-items: center; padding-bottom: 10px;">
            <div style="width: 6px; height: 20px; background: #389cff"></div>
            <div style="padding-left: 10px;">案件月统计量</div>
          </div>
          <div style="width: 100%; height: 200px" id="top_left"></div>
        </el-card>
        <el-card style="margin-top: 20px">
          <div style="border-bottom: 1px solid #ededed; display: flex; align-items: center; padding-bottom: 10px;">
            <div style="width: 6px; height: 20px; background: #389cff"></div>
            <div style="padding-left: 10px;">案件日统计量</div>
          </div>
          <div style="height: 420px; display: flex">
            <div style="width: 50%">
              <el-calendar v-model="dateTime" @input="handleDateClick()">
                <!-- <div slot="dateCell" slot-scope="{ data }" >
                  <p>{{ data.day.split('-').slice(2).join('-') }}</p>
                </div> -->
              </el-calendar>
            </div>
            <div style="width: 50%; height: 100%" id="bie_charts"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div style="border-bottom: 1px solid #ededed; display: flex; align-items: center; padding-bottom: 10px;">
            <div style="width: 6px; height: 20px; background: #389cff"></div>
            <div style="padding-left: 10px;">消息提醒</div>
          </div>
          <div v-for="(item, index) in mainlists" :key="index">
            <div style="display: flex;align-items: center;justify-content: space-between;font-size: 14px;border-bottom: 1px #999 dashed ;padding: 10px 0;">
              <div>
                <span style="color: #fe8254;margin-right: 10px;">[ 预警 ]</span>
                <span>{{ truncatedSummary(item.checkinSummary) }}</span>
              </div>
              <span>{{ item.createTime }}</span>
            </div>
          </div>
          <div v-if="!mainlists || !mainlists.length"
            style="height: 180px;display: flex;align-items: center;justify-content: center;">
            <span>暂无数据</span>
          </div>
        </el-card>
        <el-card style="margin-top: 20px">
          <div style="border-bottom: 1px solid #ededed; display: flex; align-items: center; padding-bottom: 10px;">
            <div style="width: 6px; height: 20px; background: #389cff"></div>
            <div style="padding-left: 10px;">近期需求处理走势</div>
          </div>
          <div style="height: 150px;width: 100%" id="line_cahr"></div>
        </el-card>
        <el-card style="margin-top: 20px">
          <div style="border-bottom: 1px solid #ededed; display: flex; align-items: center; padding-bottom: 10px;">
            <div style="width: 6px; height: 20px; background: #389cff"></div>
            <div style="padding-left: 10px;">案件处理分析</div>
          </div>
          <div style="height: 200px;width: 100%" id="lou_cahr"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { handleAnalytics, mainseeYear, recentTrend, seeDaydate, mainlist } from '@/api/aapal'
export default {
  name: "Index",
  data() {
    return {
      mainYear: [],
      dateTime: new Date(),
      dayDeptList: [],
      totalCount: 0,
      mainlists: [],
    };
  },
  mounted() {
    this.initEchart()
    this.initData()
  },
  methods: {
    truncatedSummary(summary) {
      if (summary.length > 30) {
        return summary.slice(0, 27) + '....';
      }
      return summary;
    },
    handleDateClick() {
      this.getDaydata()
    },
    getDaydata() {
      // 将 this.dateTime 转换为 Date 对象
      const times = new Date(this.dateTime);
      // 获取年、月、日，并格式化为 'YYYY-MM-DD'
      const year = times.getFullYear();
      const month = String(times.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
      const day = String(times.getDate()).padStart(2, '0');
      // 组合成最终的字符串格式
      const formattedDate = `${year}-${month}-${day}`;
      seeDaydate(formattedDate).then(res => {
        this.dayDeptList = res.data.dayDeptList
        this.totalCount = res.data.totalCount
        this.initEchart()
      })
    },
    initData() {
      mainseeYear().then(res => {
        this.mainYear = res.data.monthlyData
        var data = []
        this.mainYear.forEach((item) => {
          var num = 0
          item.deptStats.forEach((i) => {
            num += i.caseCount
          })
          data.push(num)
        })
        this.initLeftTop(data)
      })
      handleAnalytics().then(res => {
        var data = [
          //   {
          //   name: '完结数量',
          //   value: res.data.overCount
          // },
          {
            name: '诉求数量占比 ',
            value: res.data.CaseMainPercent
          }, {
            name: '处理案件占比',
            value: res.data.CaseDisposePercent
          }
          // ,{
          //   name: '未受理数量',
          //   value: res.data.noDisposeCount
          // }
          , {
            name: '未受理数量占比',
            value: res.data.noDisposePercent
          }
          // ,{
          //   name: '诉求数量',
          //   value: res.data.CaseMainCount
          // }
          , {
            name: '完结数量占比',
            value: res.data.overPercent
          }
        ]
        this.initRightBottom(data)
      })
      recentTrend().then(res => {
        this.dataName = res.data
        var data = {
          caseDisposeTrend: [],
          xdata: [],
          caseSuperviseTrend: [],
          caseMainTrend: [],
          caseWarningTrend: []
        }
        this.dataName.caseDisposeTrend.forEach((i) => {
          data.caseDisposeTrend.push(i.dailyCount)
          data.xdata.push(i.statDate.substring(5, i.statDate.length))
        })
        this.dataName.caseMainTrend.forEach((i) => {
          data.caseMainTrend.push(i.dailyCount)
        })
        this.dataName.caseSuperviseTrend.forEach((i) => {
          data.caseSuperviseTrend.push(i.dailyCount)
        })
        this.dataName.caseWarningTrend.forEach((i) => {
          data.caseWarningTrend.push(i.dailyCount)
        })
        this.initRightCenter(data)
      })

      this.getDaydata()
    },
    initRightCenter(data) {
      var mart2 = echarts.init(document.getElementById('line_cahr'))
      let myData8 = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
      ];
      let tss = [60, 80, 20, 40, 60, 40, 50, 50, 60, 32, 52, 55, 60];
      let dcl = [40, 55, 50, 60, 30, 20, 60, 30, 20, 10, 30, 20];
      let ycl = [20, 60, 65, 20, 10, 60, 80, 25, 40, 60, 20, 40];
      let option2 = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 233,0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)",
                  },
                ],
                global: false,
              },
            },
          },
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          confine: true,//限制溢出屏幕外
          backgroundColor: "black", //设置背景颜色
        },

        grid: {
          containLabel: true,
          bottom: "2%",
          top: "22%",
          left: "2%",
          right: "2%",
        },
        legend: {
          top: "6%",
          right: "14%",
          itemWidth: 16,
          itemHeight: 10,
          itemGap: 30,
          textStyle: {
            fontSize: 12,
            color: "#000",
            padding: [0, 0, 0, 4],
          },
        },
        xAxis: {
          data: data.xdata,
          axisLabel: {
            interval: 0,
            show: true,
            fontSize: 12,
            color: "#000",
          },
          axisLine: {
            show: true,
            lineStyle: {
              show: true,
              color: "rgba(54, 153, 255, .4)",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            name: "次",
            type: "value",
            nameTextStyle: {
              color: "#000",
              fontSize: 12,
              align: "center",
              padding: [0, 30, 0, 0],
            },
            // splitNumber: 5,
            axisLabel: {
              show: true,
              fontSize: 12,
              color: "#000",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#000",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "rgba(54, 153, 255, .4)",
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: "诉求数",
            type: "line",
            showSymbol: true,
            symbolSize: 8,
            symbol: "circle",
            lineStyle: {
              normal: {
                color: "#FF8E3C",
              },
            },
            itemStyle: {
              color: "#FF8E3C",
              borderColor: "#fff",
              borderWidth: 2,
            },
            data: data.caseDisposeTrend, // 折线图的数据
          },
          {
            name: "督办数",
            type: "line",
            showSymbol: true,
            symbol: "circle",
            symbolSize: 8,
            lineStyle: {
              normal: {
                color: "#00A0E9",
              },
            },
            itemStyle: {
              color: "#00A0E9",
              borderColor: "#fff",
              borderWidth: 2,
            },
            data: data.caseSuperviseTrend, // 折线图的数据
          },
          {
            name: "预警数",
            type: "line",
            showSymbol: true,
            symbolSize: 8,
            symbol: "circle",
            lineStyle: {
              normal: {
                color: "#02D6B0",
              },
            },
            itemStyle: {
              color: "#02D6B0",
              borderColor: "#fff",
              borderWidth: 2,
            },
            data: data.caseWarningTrend, // 折线图的数据
          }, {
            name: "处理数",
            type: "line",
            showSymbol: true,
            symbolSize: 8,
            symbol: "circle",
            lineStyle: {
              normal: {
                color: "#b01ada",
              },
            },
            itemStyle: {
              color: "#b01ada",
              borderColor: "#fff",
              borderWidth: 2,
            },
            data: data.caseDisposeTrend, // 折线图的数据
          },
        ],
      };
      mart2.setOption(option2)
    },
    initRightBottom(data) {
      var mart3 = echarts.init(document.getElementById('lou_cahr'))
      var option3 = {
        color: ["#37A2DA", "#32C5E9", "#67E0E3", "#9FE6B8", "#FFDB5C",],
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c}%"
        },
        // legend: {
        //   top: "5%",
        //   left: "6%",
        //   textStyle: {
        //     fontSize: 12,
        //     color: "#000",
        //   },
        // },
        calculable: true,
        series: [
          {
            name: '案件处理分析',
            type: 'funnel',
            left: '10%',
            top: 40,
            bottom: 0,
            width: '70%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            label: {
              normal: {
                show: true,
                position: 'right'
              },
              emphasis: {
                textStyle: {
                  fontSize: 20
                }
              }
            },
            labelLine: {
              show: false,
              normal: {
                length: 10,
                lineStyle: {
                  width: 1,
                  type: 'solid'
                }
              }
            },
            itemStyle: {
              show: false,
              normal: {
                borderColor: '#fff',
                borderWidth: 1
              }
            },
            data: data
          }
        ]
      };
      mart3.setOption(option3)
    },
    // inittooltip(dataIndex) {
    //   var data = this.mainYear[dataIndex]
    //   console.log(data.month)
    //   var e = `<div style="height: 20px; line-height: 20px; border-bottom: 1px solid #ededed">${data.month}月</div>`
    //   e += `<div style="display: flex;">`
    //   data.deptStats.forEach((item) =>{
    //     e += '<div style="width: 50%"><div>${item.deptName}:<span style="font-weight: bold">${item.caseCount}</span></div></div>'
    //   })
    //   e += `</div>`
    //   console.log(e)
    //   return e
    // },
    initLeftTop(data) {
      var mart = echarts.init(document.getElementById('top_left'))
      var that = this
      var option = {
        tooltip: {
          trigger: 'axis',
          // formatter: function (params) {
          //   console.log(params)
          //   return that.inittooltip(params[0].dataIndex)
          // }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '案件统计',
            type: 'bar',
            barWidth: '28',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(2,208,238)',
                  },
                  {
                    offset: 1,
                    color: 'rgb(73, 181, 234,0)',
                  },
                ]),
              },
            },
            data: data
          }
        ]
      };
      mart.setOption(option)
    },
    initEchart() {
      mainlist({
        pageSize: 5,
        pageNum: 1,
        caseWarningParam: 5
      }).then(res => {
        this.mainlists = res.rows
      })
      var mart1 = echarts.init(document.getElementById('bie_charts'))
      const data = this.dayDeptList.slice(0, 12).map(item => ({
        name: item.deptName,
        value: item.deptCount,
      }));

      const colorList = [
        '#FFA600',
        '#FEDB65',
        '#026DB2',
        '#12FEE0',
        '#6DD400',
        '#44D7B6',
        '#5C64FF',
        '#6988F8',
        '#0E5FFF',
        '#2DE1FD',
        '#8221F1',
        '#B26DF6',
        '#FFA600',
        '#FEDB65',
        '#026DB2',
        '#12FEE0',
        '#6DD400',
        '#44D7B6',
        '#5C64FF',
        '#6988F8',
        '#0E5FFF',
        '#2DE1FD',
        '#8221F1',
        '#B26DF6',
        '#FFA600',
        '#FEDB65',
        '#026DB2',
        '#12FEE0',
        '#6DD400',
        '#44D7B6',
        '#5C64FF',
        '#6988F8',
        '#0E5FFF',
        '#2DE1FD',
        '#8221F1',
        '#B26DF6',
        '#FFA600',
        '#FEDB65',
        '#026DB2',
        '#12FEE0',
        '#6DD400',
        '#44D7B6',
        '#5C64FF',
        '#6988F8',
        '#0E5FFF',
        '#2DE1FD',
        '#8221F1',
        '#B26DF6',
      ]

      var option1 = {
        // 环形图中间默认显示文字
        title: {
          show: true,
          text: '案件总数',
          itemGap: 10, //主副标题之间的距离
          x: 'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
          y: '35%',
          subtext: this.totalCount || "0",
          textStyle: {
            fontSize: 14,
            color: '#999999'
          },
          subtextStyle: {//副标题文本样式{"color": "#aaa"}
            fontSize: 19,
            fontWeight: "bold",
            color: '#333333'
          },
        },
        tooltip: {
          extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);',
          backgroundColor: 'rgba(0,0,0,0.75)',
          // padding: [12, 16, 12, 16],
          textStyle: {
            color: '#FFFFFF'
          },
          // 悬浮的位置可以调整，总距离左边10px
          position: (point) => {
            // return ['100', point[1]]
          },
          formatter: (param) => {
            let { name, value } = param
            let result = `<div>${name}：${value}(个)</div>`
            return result
          }
        },
        legend: {
          orient: 'horizontal',
          itemWidth: 16,
          itemHeight: 16,
          icon: 'circle',
          left: 10,
          bottom: '10%',
          data: data,
          textStyle: {
            color: 'rgba(0,0,0,0.65)'
          },
          formatter: (name) => {
            const value = data.find(item => item.name === name).value
            return `${name}：${value} 个`
          }
        },
        series: [{
          type: 'pie',
          radius: ['40%', '55%'],
          center: ['50%', '40%'], // 图形位置
          label: { // 鼠标悬浮具体数据显示
            show: false
          },
          data: data,
          itemStyle: {
            color: function (params) {
              var index = params.dataIndex + params.dataIndex;
              const colorStops = [{
                offset: 1,
                color: colorList[index]
              }, {
                offset: 0,
                color: colorList[index + 1]
              }];
              return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorStops)
            },
          },
        }]
      };
      mart1.setOption(option1)


    }
  }
};
</script>
<style>
.el-calendar-table .el-calendar-day {
  height: 35px;
  text-align: center;
}
</style>
<style scoped lang="scss"></style>
